<template>
  <view class="flex-col page">
    <MyHeader background="#fff" title="详情"></MyHeader>
    <view class="mt-8 flex-col section_4">
      <view class="flex-col section_5">
        <view class="flex-col">
          <view class="flex-row justify-between items-center group">
            <view class="flex-row items-center">
              <image class="shrink-0 image_7" :src="schoolDetail.messages?.userImage" />
              <text class="font_2 text_2 ml-13">{{schoolDetail.messages?.userName}}</text>
            </view>
            <text class="font text">{{schoolDetail.messages?.createTime}}</text>
          </view>
          <view class="mt-12 flex-col">
            <text class="self-start text_3">{{schoolDetail.messages?.title}}</text>
            <text class="self-stretch font_2 text_4 mt-5">
              {{schoolDetail.messages?.content}}
            </text>
          </view>
        </view>
        <view class="mt-28 flex-col">
          <view class="flex-row equal-division img-box">
            <image v-for="(item,index) in schoolDetail.imageList" :key="index" class="image_8 equal-division-item"
              :src="item.imagesUr" />
          </view>
          <view class="flex-row justify-between items-center group_2 mt-11">
            <view class="flex-row items-center">
              <image class="shrink-0 image_9" src="../svg/浏览.svg" />
              <text class="font_3 text_5 ml-5">{{schoolDetail.messages?.browse}}</text>
            </view>
            <view class="flex-row items-center group_3">
              <view @click.stop="onLike" class="flex-row justify-start items-center image-wrapper_2">
                <image v-if="schoolDetail.messages?.likes == 0" class="image_10" src="../svg/点赞前.svg" />
                <image v-else class="image_10" src="../svg/点赞后.svg" />
              </view>
              <view class="flex-row justify-start items-center image-wrapper_2 view_2">
                <text class="font_3 text_6">{{schoolDetail.messages?.likes}}</text>
              </view>
              <view class="flex-row justify-start items-center image-wrapper_2 view">
                <image class="image_11" src="../svg/评论.svg" />
              </view>
              <view class="flex-row justify-start text-wrapper"><text
                  class="font_3 text_7">{{schoolDetail.messages?.comments}}</text></view>
            </view>
          </view>
        </view>
      </view>
      <view class="mt-4 flex-col section_6">
        <view class="flex-col self-stretch">
          <view class="flex-col justify-start items-start self-stretch text-wrapper_2">
            <input @confirm="goWriteComment" v-model="keyword" class="font_4 font_my" placeholder="写评论" />
          </view>
          <text class="self-start font_4 text_9">共{{browses.length}}条评论</text>
          <!-- 递归写法 -->
          <!-- <view class="flex-row justify-between self-stretch group_4">
            <view class="flex-row items-center">
              <image class="shrink-0 image_12"
                src="https://ide.code.fun/api/image?token=676a0abcdefdb10011106942&name=f600bd2a26fd90e4a9351ed7073103a2.png" />
              <text class="font_2 text_10 ml-11">春游</text>
            </view>
            <text class="font text">2024-06-11 20:30</text>
          </view>
          <text class="self-end font_5 text_11">你的朋友圈就像我的小确幸，每次刷新都能带给我惊喜你的朋友圈就。</text>
          -->
          <!-- <view class="flex-row justify-between self-end group_5">
            <view class="flex-row items-center">
              <image class="shrink-0 image_13"
                src="https://ide.code.fun/api/image?token=676a0abcdefdb10011106942&name=92a2c23d615c93e75e321fcb821e6d3a.png" />
              <text class="font_2 text_12 ml-11">好运来</text>
            </view>
            <text class="font text">2024-06-11 20:30</text>
          </view>
          <text class="self-end font_5 text_13">你的朋友圈就像我的小确幸，每次刷新都能带给我惊喜你的朋友圈就。</text>
          <text class="self-start font_4 text_14">——展开17条回复</text> -->
          <block v-for="(item,index) in browses" :key="index">
            <view class="flex-row justify-between self-stretch group_6">
              <view class="flex-row items-center">
                <image class="shrink-0 image_12" :src="item.userImage" />
                <text class="font_2 ml-11">{{item.userName}}</text>
              </view>
              <text class="font text">{{item.createTime}}</text>
            </view>
            <text class="self-start font_6 text_15">{{item.content}}。</text>
          </block>
        </view>
        <text class="mt-28 self-center font text_17">— 到底了—</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onShow
  } from '@dcloudio/uni-app'
  import {
    browseAPI,
    dianZAPI,
    getDetailBrowseAPI,
    getSchoolDetailAPI
  } from '../../../apis/schoolWall';
  import {
    reactive,
    ref
  } from 'vue';
  import {
    useUserStore
  } from '../../../store/useUserStore';
  import dayjs from 'dayjs';
  const props = defineProps({
    messageId: {
      type: Number
    }
  })

  const userStore = useUserStore()
  const keyword = ref('')
  // 写评论回车事件
  const goWriteComment = async () => {
    if (!keyword.value) return
    await browseAPI({
      messageId: props.messageId,
      userId: userStore.userInfo.id,
      userName: userStore.userInfo.userName,
      userImage: userStore.userInfo.imageUrl,
      content: keyword.value,
      createTime: dayjs().format('YYYY-MM-DD hh:mm:ss')
    })
    await getDetailBrowse()
    keyword.value = ''
	getDetail()
  }
  const schoolDetail = reactive({})
  const browses = ref([])
  const getDetail = async () => {
    const res = await getSchoolDetailAPI({
      messageId: props.messageId
    })
    Object.assign(schoolDetail, res.data)
  }
  const getDetailBrowse = async () => {
    const res = await getDetailBrowseAPI(props.messageId)
    browses.value = res.data
  }

  onShow(async () => {
    await Promise.all([getDetail(), getDetailBrowse()])
  })
  // 点赞事件
  const onLike = async () => {
    schoolDetail.messages.likes++
    await dianZAPI({
      messageId: props.messageId,
      number: 1
    })
  }
</script>

<style scoped lang="css">
  .ml-13 {
    margin-left: 26rpx;
  }

  .mt-5 {
    margin-top: 10rpx;
  }

  .ml-7 {
    margin-left: 14rpx;
  }

  .mt-11 {
    margin-top: 22rpx;
  }

  .ml-5 {
    margin-left: 10rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .page {
    background-color: #f7f8fa;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  .section {
    padding: 36rpx 28rpx 28rpx 34rpx;
    background-color: #ffffff;
    border-bottom: solid 2rpx #f0f0f0;
  }

  .image {
    width: 34rpx;
    height: 22rpx;
  }

  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }

  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }

  .image_4 {
    margin-top: 56rpx;
    width: 18rpx;
    height: 34rpx;
  }

  .section_2 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    width: 174rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }

  .pos {
    position: absolute;
    right: 12rpx;
    top: 100rpx;
  }

  .image-wrapper {
    width: 38rpx;
  }

  .image_6 {
    width: 38rpx;
    height: 14rpx;
  }

  .section_3 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }

  .image_5 {
    width: 34rpx;
    height: 34rpx;
  }

  .section_4 {
    background-color: #f7f8fa;
  }

  .section_5 {
    padding: 28rpx 20rpx 16rpx 32rpx;
    background-color: #ffffff;
  }

  .group {
    margin-right: 24rpx;
  }

  .image_7 {
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
  }

  .font_2 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.74rpx;
    color: #333333;
  }

  .text_2 {
    line-height: 25.84rpx;
  }

  .font {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 56rpx;
    color: #cccccc;
  }

  .text {
    width: 250rpx;
  }

  .text_3 {
    color: #333333;
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 30.3rpx;
  }

  .text_4 {
    color: #4d4d4d;
    line-height: 40rpx;
  }

  .equal-division {
    margin-right: 8rpx;
  }

  .image_8 {
    width: 220rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

  .equal-division-item {
    height: 220rpx;
  }

  .group_2 {
    padding: 16rpx 8rpx 0;
    border-top: solid 1rpx #e5e5e5;
  }

  .image_9 {
    width: 44rpx;
    height: 44rpx;
  }

  .font_3 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 22.24rpx;
    color: #333333e6;
  }

  .text_5 {
    color: #cccccc;
    line-height: 21.26rpx;
  }

  .group_3 {
    margin-right: 8rpx;
    width: 225.12rpx;
  }

  .image-wrapper_2 {
    width: 48rpx;
  }

  .image_10 {
    width: 48rpx;
    height: 48rpx;
  }

  .view_2 {
    margin-left: 8rpx;
  }

  .text_6 {
    line-height: 20.52rpx;
  }

  .view {
    margin-left: 4rpx;
  }

  .image_11 {
    width: 44rpx;
    height: 38rpx;
  }

  .text-wrapper {
    margin-left: 20rpx;
  }

  .text_7 {
    line-height: 20.88rpx;
  }

  .section_6 {
    padding: 40rpx 32rpx 48rpx;
    background-color: #ffffff;
  }

  .text-wrapper_2 {
    padding: 20rpx 0;
    background-color: #f7f8fa;
    border-radius: 40rpx;
  }

  .font_4 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 22.24rpx;
    color: #cccccc;
  }

  .font_my {
    color: #333333;
  }

  .text_8 {
    margin-left: 32rpx;
    line-height: 22.1rpx;
  }

  .text_9 {
    margin-top: 28rpx;
    line-height: 22.16rpx;
  }

  .group_4 {
    margin: 40rpx 8rpx 0;
  }

  .image_12 {
    border-radius: 84rpx;
    width: 60rpx;
    height: 60rpx;
  }

  .text_10 {
    line-height: 25.78rpx;
  }

  .font_5 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 36rpx;
    color: #333333;
  }

  .text_11 {
    width: 576rpx;
  }

  .group_5 {
    margin-right: 8rpx;
    margin-top: 24rpx;
    width: 614.96rpx;
  }

  .image_13 {
    border-radius: 84rpx;
    width: 54rpx;
    height: 56rpx;
  }

  .text_12 {
    line-height: 25.88rpx;
  }

  .text_13 {
    width: 528rpx;
  }

  .text_14 {
    margin-left: 72rpx;
    margin-top: 24rpx;
    color: #365d99;
    line-height: 22.22rpx;
  }

  .group_6 {
    margin: 28rpx 8rpx 0;
  }

  .font_6 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 22.24rpx;
    color: #333333;
  }

  .text_15 {
    margin-left: 88rpx;
    margin-top: 8rpx;
  }

  .group_7 {
    margin: 28rpx 8rpx 0;
  }

  .text_16 {
    margin-left: 88rpx;
    margin-top: 8rpx;
  }

  .text_17 {
    line-height: 36rpx;
  }
</style>